<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>AlloyCrop base on AlloyFinger</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            background-color: black;
            text-align: center;
        }

        #crop_btn {
            color: white;
            background-color: #836FFF;
            height: 40px;
            display: inline-block;
            line-height: 40px;
            width: 110px;
            text-align: center;
            border-radius: 2px;
        }

        button{
            appearance: none;
            -webkit-appearance: none;
            border: 0;
            background: none;
        }

        #crop_circle_btn {
            color: white;
            background-color: #836FFF;
            height: 40px;
            line-height: 40px;
            width: 110px;
            text-align: center;
            border-radius: 2px;
            display: inline-block;
            margin-left: 20px;
        }

        #crop_circle_btn:active,#crop_btn:active{
            background-color: #6854e4;
        }
    </style>
</head>
<body>
    <!--<img src="./asset/test.png" style="display: none;">-->
    <!--<div id="crop_result" style="text-align: center; padding-top: 30px;width:300px; height: 200px; line-height: 300px;">
    	<!--<img src="" id='headimg'>-->
    <!--</div>--> 
     <img src="./asset/test.png" style="display: none;">
    <div id="crop_result" style="text-align: center;margin: 0px; padding-top: 30px; height: 230px; line-height: 300px;"></div>
    <button class="btn" id="crop_btn">Crop Rect</button>
    <button class="btn" id="crop_circle_btn">Crop Circle</button>
    <button class="btn" id="crop_btn">更换头像</button>
    <script src="./asset/transform.js"></script>
    <script src="./asset/alloy-finger.js"></script>
    <script src="alloy-crop.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/app.js"></script>
    <script>
    	var headimg= document.getElementById('headimg');
//  	headimg.src=home.uploadsuser+'/cut'+JSON.parse(localStorage.getItem('my')).headimg;
    	mui.plusReady(function(){
    		document.getElementById("crop_btn").addEventListener('tap', function() {
                	openImg(headimg);//点击头像的时候触发
//                  mui.openWindow('microblog/list.html')            
                    });
    		openImg(headimg);
    	function openImg(thisid){
    		if (mui.os.plus) {  
                var a = [{  
                    title: "拍照"  
                }, {  
                    title: "从手机相册选择"  
                }];  
                plus.nativeUI.actionSheet({  
                    title: "修改用户头像",  
                    cancel: "取消",  
                    buttons: a  
                }, function(a) { /*actionSheet 按钮点击事件*/  
                    switch (a.index) {  
                        case 0:mui.back();break;
                        case 1:getImage();break; /*拍照*/  
                        case 2:appendByGallery();/*打开相册*/  
                    }  
                })  
            }
    	};
    	// 拍照添加文件
   function getImage() {
    var cmr = plus.camera.getCamera(); 
    cmr.captureImage( function ( p ) {     
        plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
//      	       if(files.length<2){
                  var localurl = entry.toLocalURL();//把拍照的目录路径，变成本地url路径，例如file:///........之类的。
                  appendFile(localurl);
//                  } 
                });   
    },function( error ) {
            alert( "Capture image failed: "+error.message );
        }  
    );   
} 
// 从相册添加文件 
function appendByGallery(){
    plus.gallery.pick(function(path){
	appendFile(path);//处理图片的地方
    });
}

function checkImg(img_pach){
	if(img_pach.indexOf("/")>0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
{
    img_pach=img_pach.substring(img_pach.lastIndexOf("/")+1,img_pach.length);
}
var index= img_pach.indexOf("."); //得到"."在第几位
img_type=img_pach.substring(index+1); //截断"."之前的，得到后缀
return img_type;
   }
// 添加文件
//var f1=null;
function appendFile(path){
	var img64={};
	var imgtype=checkImg(path);//获得文件后缀
	if(imgtype==="jpeg" || imgtype==="jpg" || imgtype==="bmp" || imgtype==="png"){//判断格式是否符合//
		if(imgtype === "jpg" || imgtype === "jpeg"){//判断图片类型
		imgtype='jpeg';
		}else{
			imgtype === "jpeg";//压缩只支持jpeg 所以这里png和别的格式的我也改成了jpeg
		}
		caijian(path);
}else{
alert("格式不正确,请上传gif/jpeg/jpg/png/格式图片");
return false;	
}
}
});
    function caijian(path) {
    	crop_result=document.getElementById('crop_result');
    		new AlloyCrop({//方形
                        image_src:path,
                        width: 200,
                        height: 200,
                        output: 2,
                        ok: function (base64, canvas) {
                        	//进入
                        	var ajax_={};
                        	ajax_.murl=home.hos+"/user/userup";//服务器地址
                        	ajax_.data ={
                        mid:my.mid,//用户鉴权
                        authdate:my.authdate,//用户鉴权
                        usertoken:my.usertoken,//用户鉴权
		            	mtimg:my.headimg || '',//修改前值,
		                files:base64,       //base64相片数据        
		                type:'headimg',//修改的类型id名
		                mtoken:home.mtoken,//app鉴权
              		    };
                            crop_result.appendChild(canvas);
                            crop_result.querySelector("canvas").style.borderRadius = "0%";
                            upload(ajax_.murl,ajax_.data);//上传至服务器
                        },
                        cancel: function () {
                        	//返回
                         mui.back();
                         return false;
                        },
                         ok_text: "确认",
                         cancel_text: "取消"
           });}
// 连接服务器修改
function upload(murl,data){ 
     var wt=plus.nativeUI.showWaiting();
            //发送数据    
             mui.ajax(murl,{
                    data:data,
                    dataType:'text',
                    type:'POST',
                    timeout:10000,
                    success:function(data){
                    	datajson =JSON.parse(data);
//                 alert(JSON.stringify(data));
							 wt.close();//关闭加载 
						if (datajson.status == 200) {
							var myjson=JSON.parse(localStorage.getItem('my'));//取出数据库用户信息表
							myjson.headimg=datajson.headimg;//替换头像数据
							localStorage.setItem('my',JSON.stringify(myjson));//存入数据库
							mui.back();
							var list = plus.webview.currentWebview().opener();
									   //触发父页面的自定义事件(refresh),从而进行刷新
									mui.fire(list, 'refresh');
									//返回true,继续页面关闭逻辑
									return true;
                            plus.ui.toast("修改成功");
                        }else{
                            //失败
                            plus.ui.toast("修改失败");
                        }
                   }
                })
}
    </script>

</body>
</html>
